<template>
<Layout :loading="loading">
  <view class="py-48 bg-red-400 px-54 flex flex-col justify-center ss-wages-banner">
    <view class="text-24 text-white">{{detailsData?.realName}}，辛苦啦～</view>
    <view class="text-64 text-white font-bold">{{detailsData?.realWage.toFixed(2)}}</view>
    <view class="text-[#FDE3DC] text-24 border-b ss-border-color pb-16 w-320">实发工资(元)</view>
    <view class="text-[#FDE3DC] text-24 pt-16">公司：{{detailsData?.enterpriseShortName}}</view>
  </view>
  <view class="mt-16 bg-[#FFEAD9] p-32" v-if="isShowNotice && (detailsData?.noticeInfo)">
    <view class="flex justify-between mb-16">
      <view class="flex items-center ">
        <img class="w-32 h-32 mr-8" src="@/static/img/notice-con.png" alt="">
        <view class="text-24 text-m-333">温馨提示</view>
      </view>
      <u-icon name="close" color="#333" size="16" top="2rpx" @click="hideNotice"></u-icon>
    </view>
    <view>
      <view class=" text-m-333 mb-16">
        <div ref="uReadMore" :class="{'u-line-2': isHide}">
          <view class="text-24">{{detailsData?.noticeInfo}}</view>
        </div>
      </view>
      <view v-if="isMore">
        <view class="text-[#FF7200] text-24" v-if="isHide" @click="isHide = false">展开全部</view>
        <view class="text-[#FF7200] text-24" v-if="!isHide" @click="isHide = true">收起全部</view>
      </view>

    </view>
  </view>

  <view class="mt-32 ">
    <view class="px-16 bg-[#F9F9F9] rounded-[8rpx] border border-[#EEEEEE] py-16 mx-16">
      <view class="text-m-333 text-32 mb-8">{{detailsData?.realName}}</view>
      <view class="flex items-center">
        <view class="flex items-center pr-24">
          <img src="@/static/img/card-icon.png" class="w-24 h-24 mr-4" alt="">
          <view class="text-24 text-m-333">{{detailsData?.cardNo}}</view>
        </view>
        <view class="w-1 h-24 bg-[#CCCCCC]"></view>
        <view class="flex items-center pl-24">
          <img src="@/static/img/phone-icon.png" class="w-24 h-24 mr-4" alt="">
          <view class="text-24 text-m-333">{{detailsData?.mobile}}</view>
        </view>
      </view>
    </view>

    <view class="mx-48">
      <view class="flex justify-between py-32 u-border-bottom" v-for="(item, key) in detailsData?.dataMap" :key="key">
        <view class="text-28 text-m-666">{{key}}</view>
        <view class="text-28 text-m-333 font-bold">{{item}}</view>
      </view>
      <view class="flex justify-end pt-16 pb-80">
        <view>
          <text class="text-28 text-m-666">实发工资：</text>
          <text class="text-36 font-bold text-m-333">¥{{detailsData?.realWage.toFixed(2)}}</text>
        </view>
      </view>
    </view>
  </view>

</Layout>
</template>

<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {UserApi} from "@/api";
import { onLoad } from "@dcloudio/uni-app";

const id = ref('')
const code = ref('')
const monthFree = ref('0')
const type = ref('0')
const isShowNotice = ref(true)
const isHide = ref(false)
const isMore = ref(false)
const loading = ref(true)
const uReadMore = ref<HTMLElement>()
const detailsData = ref<any>(null)

onLoad((e: any) => {
  id.value = e.id || ''
  code.value = e.code || ''
  type.value = e.type || '0'
  monthFree.value = e.monthFree || '0'
  getQueryDetailById()
})

const getQueryDetailById = async () => {
  try {
    const confirm = type.value == '1'? UserApi.queryDetailById : UserApi.queryDetailNoLogin
    const res = await confirm({
      id: id.value,
      code: code.value,
      monthFree: monthFree.value,
    })
    detailsData.value = res.data
    loading.value = false
    nextTick(() => {
      const rect: any = uReadMore.value?.getBoundingClientRect()
      if (rect?.height > 40 * (uni.$u.sys().windowWidth / 375)) {
        isHide.value = true
        isMore.value = true
      }
      console.log(uReadMore.value?.getClientRects())
    })
  } catch (e) {
    uni.$u.sleep(1500).then(() => {
      window.history.go(-1)
    })
  }

}

const hideNotice = () => {
  isShowNotice.value = false
}

</script>

<style scoped lang="scss">
.ss-wages-banner{background: url("@/static/img/user-bg.png") no-repeat center center; background-size: cover}
.ss-border-color{border-color: rgba(255,255,255,.3)}
</style>